<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="houdunren" data="hd">houdunren.com</div>
        <div class="houdunwang">houdunwang.com</div>
      </div>
      <hr>
      <div id="app1">
        <button name="buttons">houdunren.com</button>
        <img src="../img/fenche.png" alt="" />
      </div>
    <script>
        //innerHtml打印属于Html  中元素的内部元素的内容
        let app=document.querySelector("#app");
        console.log(app.innerHTML);
        // <div class="houdunren" data="hd">houdunren.com</div>
        // <div class="houdunwang">houdunwang.com</div


        //添加app的innerhtml,会清空原来的内容
    // app.innerHTML=`<a href="www.houdunren.com">后盾人</a>`;

    //使用 +=就可以让原来的内容还在
    app.innerHTML+=`<hr><a href="www.houdunren.com">后盾人</a>`;


    //button
    let app1=document.querySelector("#app1");
    document.querySelector("[name='buttons']").addEventListener("click",function(){
        alert(this.innerHTML);
    this.parentElement.innerHTML += '<hr/>向军大叔';
    
    })
    </script>
</body>
</html>